<template>
  <div class="user-rating-container">
    <ts-header title="用户评价" back></ts-header>
    <flex-view>
      <pull-to>
        <div class="user-rating" v-if="ratingList.length>0">
          <div class="user-rating-item" v-for="rating in ratingList">
            <div class="uri-top">
              <span class="uri-username">匿名</span>
              <span class="uri-datetime">{{rating.update_time | fmtCommonDate('yyyy.MM.dd')}}</span>
            </div>
            <div class="uri-star">
              <span v-for="item in stars(rating.content_star)">
                <img v-if="item" class="star-icon" src="../../assets/imgs/icon/star_true.png"/>
                <img v-if="!item" class="star-icon" src="../../assets/imgs/icon/star_false.png"/>
              </span>
            </div>
            <div class="uri-content">
              {{rating.content}}
            </div>
            <div class="uri-img">
              <div class="img-list" v-for="img in rating.image_url">
                <img :src="img" @click="showPhoto(rating.image_url)"/>
              </div>
            </div>
          </div>
        </div>
        <p v-else class="no-data">暂无数据</p>
      </pull-to>
    </flex-view>
    <div v-transfer-dom>
      <previewer :list="imgList" ref="previewer"></previewer>
    </div>
  </div>
</template>

<script>
  import {GET_USER_RATINGS} from '../../assets/js/api'
  import TransferDom from '../../core/directives/transfer-dom'

  export default {
    name: 'rating',
    data() {
      return {
        ratingList: [],
        imgList: []
      }
    },
    async mounted() {
      const json = await this.$http.post(GET_USER_RATINGS);
      console.log(json)
      if (json.result === 1) {
        json.data.sort()
        this.ratingList = json.data;

      }
    },
    methods: {
      stars(count) {
        let temp = [];
        if (count === 0) return [0, 0, 0, 0, 0];
        for (let i = 0; i < count; i++) {
          temp.push(1);
        }
        let len = 5 - count;
        if (len === 0) return temp;
        for (let j = 0; j < len; j++) {
          temp.push(0);
        }
        return temp;
      },
      showPhoto(image) {
        this.imgList = [];
        image.map((item, key, arr) => {
          this.imgList.push({src: item});
        });
        this.$nextTick(() => {
          this.$refs.previewer.show(0)
        });
      }
    },
    directives: {
      TransferDom
    },
    components: {
      previewer(resolve) {
        require(['../../components/tsui/previewer/previewer.vue'], resolve);
      }
    },

  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";

  .user-rating-container {
    background-color: #FFFFFF;
  }

  .user-rating {
    .user-rating-item {
      padding: .25rem .25rem;
      position: relative;
      @include borderScale('bottom');
      .uri-top {
        @include sc(.26rem, #909090);
        padding-bottom: .20rem;
        display: flex;
        align-items: center;
        .uri-username {
          display: block;
          flex: 1;
        }
      }
      .uri-star {
        .star-icon {
          width: 14px;
        }
      }
      .uri-content {
        margin-top: .13rem;
        font-size: .26rem;
      }
      .uri-img {
        margin-left: -.10rem;
        margin-top: .20rem;
        .img-list {
          display: inline-block;
          @include wh(1.70rem, 1.70rem);
          margin-bottom: .10rem;
          margin-left: .10rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>
